<template>
  <RouterLink :to="{ path: '/Images' }">  自动化测试截图</RouterLink>
  <div class="todo-container">
    <h1>Todo List</h1>
    <button @click="handleLogout" class="logout-btn">退出登录</button>
    <TodoInput @add-todo="addTodo" />
    <ul>
      <TodoItem v-for="(todo, index) in todos" :key="index" :todo="todo" :index="index" @remove-todo="removeTodo"
        @update-todo="updateTodo" />
    </ul>
    <p v-if="remainingTodos === 0">All tasks are completed!</p>
    <p v-else>{{ remainingTodos }} tasks remaining.</p>
    <TodoClearButton @clear-todos="clearTodos" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import TodoInput from './TodoInput.vue';
import TodoItem from './TodoItem.vue';
import TodoClearButton from './TodoClearButton.vue';
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const todos = ref([]);

const remainingTodos = computed(() => {
  return todos.value.length;
});

function addTodo(todo) {
  todos.value.push(todo);
}

function removeTodo(index) {
  todos.value.splice(index, 1);
}

function clearTodos() {
  todos.value = [];
}

function updateTodo({ index, newTodo }) {
  todos.value[index] = newTodo;
}

console.log('TodoList component is mounted');

const router = useRouter()
const authStore = useAuthStore()

const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.todo-container {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: Arial, sans-serif;
}

p {
  /* margin-top: 20px; */
  font-size: 18px;
}

.logout-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px 10px;
  background-color: #ff6666;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
</style>